<template>
<div>
    <div class="search">
        <input  class="search-input" v-model="keyword"  type="text" placeholder="输入城市名或拼音">
    </div>
    <div class="search-content"
        ref="search"
        v-show="keyword"
         >
        <ul>
            <li  class="search-item border-bottom"
                v-for="item of list"
                :key="item.id"
                @click="handleCityClick(item.name)"
                >
                    {{item.name}}
                </li>
            <li  class="search-item border-bottom" v-show="hasNoData" >未找到匹配数据！</li>
        </ul>
    </div>
</div>
</template>

<script>
import Bscroll from 'better-scroll'
import { mapMutations} from 'vuex'
    export default {
        name: "CitySearch",
        props:{
            cities: Object
        },
        computed:{
          hasNoData(){
            return !this.list.length
          }
        },
        methods:{
            handleCityClick(city){
                // dispatch 分发到vuex的actions方法
                //this.$store.commit('changeCity',city)
                this.changeCity(city)
                //路由跳转，选择城市后，返回首页
                this.$router.push('/')
            },
            ...mapMutations(['changeCity'])
        },
        data(){
            return{
                keyword:'',
                list:[],
                timer:null
            }
        },
        mounted(){
            this.scroll = new Bscroll(this.$refs.search)
        },
        watch:{
            keyword(){
                if(this.timer){
                    clearTimeout(this.timer)
                }
                if(!this.keyword){
                    this.list = []
                     return
                }
                this.timer = setTimeout(()=>{
                    const result =[]
                    for (let i in this.cities){
                        this.cities[i].forEach((value)=>{
                            if( value.spell.indexOf(this.keyword) > -1 ||
                                value.name.indexOf(this.keyword)> -1){
                                result.push(value)
                            }
                        })
                    }
                    this.list = result
                },100)
            }
        }
    }
</script>

<style  lang="stylus" scoped>
    @import '../../assets/style/varibles.styl'
    .search
        height  .75rem
        padding 0 .1rem
        background:$bgColor
        line-height .75rem
        .search-input
            box-sizing border-box
            padding 0 .1rem
            width:100%
            height .62rem
            line-height .62rem
            text-align center
            border-radius 0.06rem
            color: #666
    .search-content
        overflow hidden
        z-index 1
        top 1.58rem
        position absolute
        left:0
        right:0
        bottom:0
        /*background: green*/
        .search-item
            line-height  .62rem
            padding-left: .2rem
            background: #fff
            color #666



</style>